import React from 'react';
import { connect } from 'dva';
import { Link } from 'dva/router';
import { Layout, Menu, Icon } from 'antd';
import styles from './Index.less';

const { Content, Sider } = Layout;
const SubMenu = Menu.SubMenu;

class Index extends React.Component {
  constructor(...args) {
    super(...args);

    if (args[0].location.pathname == '/') args[0].location.pathname = '/Dashboard';
    this.state = {
      current: `${args[0].location.pathname}`,
      collapsed: false,
      mode: 'inline',
      theme: 'dark',
      siderBgColor: 'white',
      title: '萌岛',

    };
  }

  onCollapse = (collapsed) => {
    this.setState({
      collapsed,
      mode: collapsed ? 'vertical' : 'inline',
      title: collapsed ? '' : '萌岛',
    });
  }

  render() {
    return (

      <Layout className="index">


        <Sider
          collapsible
          collapsed={this.state.collapsed}
          onCollapse={this.onCollapse}
          className={styles.menu}
        >
          <div className="logo">
            {this.state.title}
          </div>
          <Menu
            theme="dark" mode={this.state.mode} defaultSelectedKeys={[this.state.current]}
          >
            <SubMenu
              key="sub1"
              title={<span><Icon type="user" /><span className="nav-text">监控</span></span>}
            >
              <Menu.Item key="/Dashboard"><Link to="/Dashboard">毛绒客</Link></Menu.Item>
              <Menu.Item key="/WeChat"><Link to="/WeChat">公众号</Link></Menu.Item>
            </SubMenu>
            <SubMenu
              key="sub2"
              title={<span><Icon type="team" /><span className="nav-text">数据</span></span>}
            >
              {/* <Menu.Item key="/union"><Link to="/union"> 萌岛联盟</Link></Menu.Item>
              <Menu.Item key="/happylife"><Link to="/happylife">萌岛乐生活</Link></Menu.Item>
              <Menu.Item key="/IntelligentParadise"><Link to="/IntelligentParadise">萌岛智能乐园</Link></Menu.Item>*/}
              <Menu.Item key="UserMsg"><Link to="/UserMsg">用户管理</Link></Menu.Item>
            </SubMenu>
          </Menu>
        </Sider>


        <Layout key="banner" style={{ minHeight: 360 }}>
          <Content >
            <div style={{ padding: 10, minHeight: 360, margin: 'auto', zIndex: 0, position: 'relative' }}>
              {this.props.children}
            </div>
          </Content>
        </Layout>


      </Layout>

    );
  }
}


Index.propTypes = {
};

export default connect()(Index);
